<template>
  <transition name="move" mode="out-in">
    <button :key="btnKey" @click="btnClick">{{btnText}}</button>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      btnKey: "add",
      index: 0
    };
  },
  computed: {
    btnText() {
      switch (this.btnKey) {
        case "add":
          return "添加";
        case "delete":
          return "删除";
        case "put":
          return "更新";
        default:
          return "";
      }
    }
  },
  methods: {
    btnClick() {
      const _ = ["add", "delete", "put"];
      this.index = ++this.index % _.length;
      this.btnKey = _[this.index];
    }
  }
};
</script>
<style lang="less" scoped>
button {
    position: fixed;
    top: 240px;
    height: 26px;
    width: 70px;
}
.move-enter {
    transform: translateX(60px);
    opacity: 0;
}
// .move-enter,
.move-leave-to {
    transform: translateX(-60px);
    opacity: 0;
}
.move-enter-active,
.move-leave-active {
    transition: all .5s;
}
// .move-enter-active {
//     transition-delay: .3s;
// }
</style>